<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>antd Tabs</title>
    <link href="../../../../libs/antd/3.1.1/antd.min.css" rel="stylesheet">

    <script src="../../../../libs/react/16.2.0/umd/react.production.min.js"></script>
    <script src="../../../../libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
    <script src="../../../../libs/react-router-dom/4.2.2/react-router-dom.min.js"></script>
    <script src="../../../../libs/prop-types/15.6.0/prop-types.min.js"></script>
    <script src="../../../../libs/moment.js/2.20.1/moment.min.js"></script>
    <script src="../../../../libs/moment.js/2.20.1/locale/zh-cn.js"></script>
    <script src="../../../../libs/antd/3.1.1/antd.min.js"></script>

    <script src="../../../../libs/babel-standalone/6.26.0/babel.min.js"></script>
    <script src="../../../../libs/css-element-queries/1.0.1/ResizeSensor.js"></script>
    <style>
        #content1 {
            min-height: 300px;
            position: relative;
        }
        #body1{
            position:absolute;
        }
    </style>
</head>

<body>
    <div id='app'></div>
</body>
<script type="text/babel">
    const mountNode = document.getElementById('app');
    const { Layout } = antd;
    const { Header, Footer, Sider, Content } = Layout;
    var content1;

    class Demo extends React.Component {
        componentDidMount(){
            console.log('ss');
            console.log(this.content1);
            content1 = document.getElementById('content1');
            new ResizeSensor(content1, function() {
                console.log('Changed to ' + content1.clientWidth);
            });
        }
        render(){
            return (
                <div>
                    <Layout>
                        <Header>Header</Header>
                        <Content id="content1" ref={(input) => { this.content1 = input; }}><div id="body1"></div></Content>
                        <Footer>Footer</Footer>
                    </Layout>

                    <Layout>
                        <Header>Header</Header>
                        <Layout>
                            <Sider>Sider</Sider>
                            <Content>Content</Content>
                        </Layout>
                        <Footer>Footer</Footer>
                    </Layout>

                    <Layout>
                        <Header>Header</Header>
                        <Layout>
                            <Content>Content</Content>
                            <Sider>Sider</Sider>
                        </Layout>
                        <Footer>Footer</Footer>
                    </Layout>

                    <Layout>
                        <Sider>Sider</Sider>
                        <Layout>
                            <Header>Header</Header>
                            <Content>Content</Content>
                            <Footer>Footer</Footer>
                        </Layout>
                    </Layout>
                </div>
            );
        }
    }

    ReactDOM.render(<Demo />
        , mountNode);
</script>

</html>